<template>
  <div class="app-container">
    <!-- filter -->
    <filter-form :form="listQuery" :data="filterData" :has-default-operation="false" style="margin-bottom: 10px;">
      <el-button type="primary" size="mini" icon="el-icon-refresh" @click="getListPage">刷新</el-button>
    </filter-form>
    <!-- filter -->
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      tooltip-effect="dark"
      style="width: 100%;">
      <el-table-column label="序号" type="index" width="50" align="center" />
      <el-table-column align="center" label="通道国标编号" prop="channelId" />
      <el-table-column align="center" label="通道名称" prop="channelName" />
      <el-table-column align="center" label="在线状态">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === '1' ? 'success' : 'info'" disable-transitions>{{ scope.row.statusName }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200" align="center">
        <template slot-scope="scope">
          <span style="margin-right: 10px">
            <el-tooltip class="item" content="播放" effect="light" placement="top">
              <el-button icon="el-icon-video-play" size="mini" type="primary" @click="play(scope.row)">播放</el-button>
            </el-tooltip>
          </span>
          <span style="margin-right: 10px">
            <el-tooltip class="item" content="设备录像" effect="light" placement="top">
              <el-button icon="el-icon-video-camera" size="mini" type="primary" @click="queryRecords(scope.row)">设备录像</el-button>
            </el-tooltip>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="page-box">
      <pagination :total="total" :page.sync="listQuery.page" :size.sync="listQuery.size" @pagination="getListPage" />
    </div>
    <!-- 分页 -->

    <!-- 视频播放对话框 -->
    <div v-if="videoDialog.visible">
      <video-play :dialog="videoDialog" />
    </div>
    <!-- 视频播放对话框 -->
  </div>
</template>

<script>
import { getListPage, syncChannel } from '@/api/cms/monitor/deviceChannel'
import { tableMixin } from '@/utils/public'
import videoPlay from './components/videoPlay'
export default {
  name: 'DeviceChannel',
  components: { videoPlay },
  mixins: [tableMixin],
  data() {
    return {
      // 表格高度
      height: 0,
      tableKey: 0,
      list: null,
      current: 1,
      total: 0,
      listLoading: false,

      // 顶部操作栏配置
      filterData: {
      },
      // 查询参数
      listQuery: {
        page: 1,
        size: 5,
        deviceIdentification: null
      },
      videoDialog: {
        title: '',
        visible: false,
        disabled: false,
        deviceIdentification: null,
        channelId: null
      }
    }
  },
  watch: {
  },
  created() {
    this.listQuery.deviceIdentification = this.$route.query.deviceIdentification
  },
  activated() {
    this.listQuery.deviceIdentification = this.$route.query.deviceIdentification
    this.getListPage()
  },
  methods: {
    // 查询列表信息
    getListPage() {
      this.listLoading = true
      syncChannel(this.listQuery)
      // 查询列表信息
      getListPage(this.listQuery).then(response => {
        this.list = response.data.records
        this.total = response.data.total
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
      })
    },
    play(row) {
      // this.$router.push({ path: '/cms/device-data/player', query: { 'row': JSON.stringify(row) }})
      this.videoDialog.title = '实时视频播放'
      this.videoDialog.visible = true
      this.videoDialog.disabled = true
      this.videoDialog.deviceIdentification = row.deviceIdentification
      this.videoDialog.channelId = row.channelId
    },
    queryRecords(row) {
      var params = {
        deviceIdentification: row.deviceIdentification,
        channelId: row.channelId
      }
      this.$router.push({ path: '/cms/device-data/videoRecord', query: { 'row': JSON.stringify(params) }})
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
